<script lang="ts" setup>
import order from "./components/order.vue"
</script>

<template>
    <umrp-page bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
        <umrp-title-bar>
            <umrp-icon name="left" :size="20" v-route="'XiaolankaClientMe'"></umrp-icon>
            <umrp-text>我的订单</umrp-text>
        </umrp-title-bar>
        <umrp-tabs default-active-tab="1">
            <umrp-tab-panel key="1" title="全部">
                <umrp-container padding="0 10px" :gap="10" v-route="'XiaolankaClientOrderDetail'">
                    <order>
                        <template #status>
                            <umrp-text :size="12" color="secondary">待使用</umrp-text>
                        </template>
                    </order>
                    <order>
                        <template #status>
                            <umrp-text :size="12" color="secondary">待付款</umrp-text>
                        </template>
                        <umrp-button shape="round" style="font-size: 12px">继续支付</umrp-button>
                    </order>
                </umrp-container>
            </umrp-tab-panel>
            <umrp-tab-panel key="2" title="待付款"></umrp-tab-panel>
            <umrp-tab-panel key="3" title="待使用"></umrp-tab-panel>
            <umrp-tab-panel key="4" title="已完成"></umrp-tab-panel>
        </umrp-tabs>
    </umrp-page>
</template>